<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>手机商城</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/shojishop.css">
</head>
<body>
   
    
   
         <!--导航-->
       <div class="wrapper">
            <div class="header">
                <div class="logo">
                    <img src="http://s.banggo.com/pub7/images/mobile/new/logo.png" alt="">
                </div>
                <div class="links">
                    <a href="###">iPhone</a>
                    |
                    <a href="###">Android</a>
                    |
                    <a href="###">iPad</a>
                    |
                </div>
            </div>
        </div>
        <!--二维码-->
        <div>
            <p>还可以领取新人大礼包!</p>
            <div>
                <p>手机扫描二维码下载</p>
                <a href="###"></a>
            </div>
        </div>
        <!--轮播 内容-->
        <div class="warp">
            <div class="page1 zypage ">
                <img src="img/pic01.jpg" alt="" class="page_left">
            </div>
            <div class="page2 zypage ">
                <img src="img/newpic02.png" alt="" class="page_left">
            </div>
            <div class="page3 zypage ">
                <img src="img/pic03new.png" alt="" class="page_left">
            </div>
            <div class="page4 zypage ">
                <img src="img/pic04.png" alt="" class="page_left">
            </div>
        </div>
        <div class="page_right">
            <p>还可以领取新人大礼包</p>
            <div class="qrcode">
                <p class="tipTxt">
                    手机扫描二维码下载
                </p>
                <a href="#"></a>
            </div>
        </div>
        <a class="wrap_json" id="btn1" href="#"></a>
        <div class="ring">
            <a href="#" class="active"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
        </div>



        <div class="popBox">
                <h3>
                    下载移动邦购
                </h3>
            <a class="close_btn" href="javascript:void(0);"></a> 
                <div class="popCon">
                    <ul>
                        <li class="iPhone_link on">
                            <b></b> <br />
                        </li>
                        <li class="Android_link">
                            <b></b> <br />
                        </li>
                        <li class="iPad_link">
                            <b></b> <br />
                        </li>
                    </ul>
                </div>
                <div class="app_link">
                    <ul>
                        <li class="on iPhone_app">
                            <p class="app_left">
                                <a href="http://itunes.apple.com/cn/app/id427543233?mt=8" target="_blank"></a> <i>前往APPstore下载</i> <span>版本：V6.5.2 <br />
            更新日期：2018-06-02 <br />
            应用平台：适合于IOS7.0以上系统</span> 
                            </p>
                            <p class="app_right">
                                <i>手机扫描二维码下载</i> 
                            </p>
                        </li>
                        <li class="Android_app">
                            <p class="app_left">
                                <a href="http://s.banggo.com/mobile/MBStore.apk" target="_blank"></a> <i>立即下载到电脑</i> <span>版本：V6.5.2 <br />
            更新日期：2018-06-02 <br />
            应用平台：适合于Android2.3以上系统</span> 
                            </p>
                            <p class="app_right">
                                <i>手机扫描二维码下载</i> 
                            </p>
                        </li>
                        <li class="iPad_app">
                            <p class="app_left">
                                <a href="http://itunes.apple.com/cn/app/id876806038?mt=8" target="_blank"></a> <i>前往APPstore下载</i> <span>版本：V6.0.0 <br />
            更新日期：2016-12-11 <br />
            应用平台：适合于IOS7.0以上系统</span> 
                            </p>
                            <p class="app_right">
                                <i>手机扫描二维码下载</i> 
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
    <script src="jquery/jquery-1.12.4.js"></script>
    <script>
//根据浏览器窗口大小设置DIV的高度.
        $(function(){
            function getHeight(){
                var WindowsHeight=$(window).height()
                $('.warp').css('height',WindowsHeight)
            }
            getHeight()
           $(window).resize(function(){
            getHeight()
           })

//监听鼠标向上向下，并且完成移动
        var x=0;
        var flag=true;
        $(document).on('mousewheel DOMMouseScroll', onMouseScroll);
            function onMouseScroll(e){
                e.preventDefault();
                var WindowsHeight=$(window).height()
                var wheel = e.originalEvent.wheelDelta || -e.originalEvent.detail;
                var delta = Math.max(-1, Math.min(1, wheel));
                if(flag){
                    flag=false;
                    if(delta<0){//向下滚动
                    x++;
                    if(x==3){
                        $('#btn1').addClass('letter')
                    }
                    if(x>3){
                        x=3;
                        flag=true;
                        return ;
                    }
                    }else{//向上滚动
                        x--;
                        if(x<3){
                            $('#btn1').removeClass('letter')
                        }
                        if(x<0){
                            x=0;
                            flag=true;
                            return ;
                        }
                    }
                    inbg(x)
                    $('.zypage').stop().animate({
                        top:-x*WindowsHeight
                    },1000,function(){
                        flag=true;
                    })    
                }
            }
//点击事件
            $('#btn1').on('click',function(){
                var WindowsHeight=$(window).height();
                x++;
                if(x>3){
                    x=0;
                    $('#btn1').removeClass('letter')
                }
                if(x==3){
                    $('#btn1').addClass('letter')
                }
                inbg(x)
                $('.zypage').stop().animate({
                    top:-x*WindowsHeight
                },1500) 
            })
//圆点变色
            function inbg(ins){
                $('.ring a').eq(ins).addClass('active').siblings('.active').removeClass('active')
            }
//点击圆点滑动
            $('.ring a').on('click',function(){
                var WindowsHeight=$(window).height();
                x=$(this).index()
                inbg(x);
                if(x<3){
                    $('#btn1').removeClass('letter')
                }
                if(x==3){
                    $('#btn1').addClass('letter')
                }
                $('.zypage').stop().animate({
                    top:-x*WindowsHeight
                },1500)
            })

//下载
            $('.popCon li').on('mouseover',function(){
                console.log('===')
                $(this).addClass('on').siblings('.on').removeClass('on')
                $('.app_link li').eq($(this).index()).show().siblings().hide()
            })
//打开下载区
            $('.qrcode a').on('click',function(){
                $('.popBox').show()
            })

//关闭
            $('.close_btn').on('click',function(){
                $('.popBox').hide()
            })
        })
    </script>
</body>
</html>